<template>
  <view>
    <uni-popup ref="popupTY" type="center" :mask-click="true" @change="onChange">
      <view class="MsgDialog-container" v-if="mainProduct">
<!--        <view class="img-close" @click="finish">
          <image class="icon" src="@/static/login/guanbi.png"></image>
        </view>-->
        <view class="title_container">
          <view class="title">终身会员特权</view>
        </view>
        <view class="row">
          <view class="f1"></view>
          <view class="text">普通用户</view>
          <view class="text vip">终身VIP</view>
        </view>
        <view class="row quanxian">
          <view class="icon qy1"></view>
          <view class="label">精选500题</view>
          <view class="text">
            <view class="icon cuo"></view>
          </view>
          <view class="text vip">
            <view class="icon dui"></view>
          </view>
        </view>
        <view class="row quanxian">
          <view class="icon qy2"></view>
          <view class="label">10套考前密卷</view>
          <view class="text">
            <view class="icon cuo"></view>
          </view>
          <view class="text vip">
            <view class="icon dui"></view>
          </view>
        </view>
        <view class="row quanxian">
          <view class="icon qy3"></view>
          <view class="label">速记口诀</view>
          <view class="text">
            <view class="icon cuo"></view>
          </view>
          <view class="text vip">
            <view class="icon dui"></view>
          </view>
        </view>
        <view class="row quanxian">
          <view class="icon qy4"></view>
          <view class="label">教练视频教学</view>
          <view class="text">
            <view class="icon cuo"></view>
          </view>
          <view class="text vip">
            <view class="icon dui"></view>
          </view>
        </view>
        <view class="row quanxian">
          <view class="icon qy5"></view>
          <view class="label">试题详解</view>
          <view class="text">
            <view class="icon cuo"></view>
          </view>
          <view class="text vip">
            <view class="icon dui"></view>
          </view>
        </view>
        <view class="row quanxian">
          <view class="icon qy6"></view>
          <view class="label">真实考场模拟</view>
          <view class="text">
            <view class="icon cuo"></view>
          </view>
          <view class="text vip">
            <view class="icon dui"></view>
          </view>
        </view>
        <view class="product_container1">
          <view class="label">{{ mainProductTitle }}</view>
          <view class="price_container">
            <view class="unit">￥</view>
            <view class="price">{{ mainProduct.price }}</view>
            <view class="per">/永久</view>
          </view>
        </view>
        <view class="btns_container flex-row justify-between">
          <view class="flex-row center buchang" @click="finish">残忍离开</view>
          <view class="flex-row buy center btn" @click="toBuy(mainProduct)">特价购买</view>
        </view>
        <image src="http://down.qwdata.vip/app_icon/1704725047886" class="vip_icon"></image>
      </view>
    </uni-popup>
    <AgreementVIPDialog ref="AgreementVIPDialog" v-if="needCheckVipProtocol"></AgreementVIPDialog>
    <Pay ref="pay" v-if="!eventBuy" @success="onPaySuccess"></Pay>
    <LoginView ref="LoginView" @login_success="onLoginSuccess"></LoginView>
    <TiyanDialog ref="TiyanDialog"></TiyanDialog>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import Pay from "./Pay.vue";
import LoginView from "./LoginView/LoginView.vue";
import AgreementVIPDialog from "@/components/LoginView/AgreementVIPDialog.vue";
import {commonApi} from "@/api";
import TiyanDialog from "@/components/TiyanDialog.vue";
import productUtils from "../libs/productUtils";

export default {
  name: 'VIPQuanyiDialog',
  components: {TiyanDialog, LoginView, AgreementVIPDialog, Pay},
  props: ['eventBuy'],
  data() {
    return {
      lastSelect: null,
      agree: false,
      show: false
    }
  },
  computed: {
    ...mapGetters(['mainProduct', 'canPay', 'isLogined', 'haveVIP', 'kaobuguo', 'mine', 'haveAuths']),
    mainProductTitle() {
      if (this.mainProduct) {
        return productUtils.getProductTitle(this.mainProduct)
      } else {
        return ''
      }
    },
    isLogin() {
      if (this.haveVIP) {
        return true
      }
      return this.haveAuths
    },
    needCheckVipProtocol() {
      // #ifdef MP-WEIXIN
      return true
      // #endif

      // #ifndef MP-WEIXIN
      return false
      // #endif

      // return true
    }
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    ...mapActions(['refreshUser']),
    isShowing() {
      return this.show
    },
    unit(product) {
      if (!product) {
        return ''
      }
      const unitList = ['', '月', '天', '年']
      const str = product.vipDayCount + unitList[product.vipDayUnit]
      if (str === '99年') {
        return '终身'
      }
      return str
    },
    async open(forcePay = false) {
      console.log('[权益]：', forcePay, this.canPay, !forcePay && !this.canPay)

      if (!forcePay && !this.canPay) {
        return
      }

      if (this.haveVIP) {
        console.log('[权益]已经是VIP')
        return
      }
      console.log('展示')
      if (!this.mine.tiyanExpiredAt) {
        const res = await commonApi.startTiyan()
        if (res.data.data) {
          await this.refreshUser()
          this.$refs.TiyanDialog.open()
          return
        }
      }
      this.show = true
      this.$refs.popupTY.open()
    },
    forcedOpen() {
      this.show = true
      this.$refs.popupTY.open()
    },
    finish() {
      this.close()

      this.$emit('finish')
    },
    close() {
      this.show = false
      this.$refs.popupTY.close()
      this.$emit('close')
    },
    onChange(arg) {
      // console.log('onChange', arg)
    },
    async toBuy(product) {
      this.lastSelect = product
      if (this.eventBuy) {
        this.$emit('toBuy', {product, from: 'tiyan', mode: 'product'})
      } else {
        if (this.toLogin()) {
          return
        }
        await this.checkProtocol()
        this.$refs.pay.open({mode: 'product', from: 'vip', product})
      }
    },
    toLogin() {
      if (!this.isLogin) {
        this.$refs.LoginView.open()
        return true
      }
    },
    async checkProtocol() {
      if (this.needCheckVipProtocol && !this.agree) {
        await this.$refs.AgreementVIPDialog.open()
        this.agree = true
      }
    },
    onLoginSuccess() {
      console.log('onLoginSuccess', this.lastSelect)
      if (this.lastSelect) {
        this.$refs.pay.open({mode: 'product', from: 'vip', product: this.lastSelect})
      }
    },
    onPaySuccess() {
      this.refreshUser()
      this.close()
    },
    toVipProtocol() {
      uni.navigateTo({
        url: '/pages/webview/webview?type=vip'
      })
    },
    productBottomTips(product) {
      let day = 0

      let perDay = 0

      if (product.vipDayUnit === 1) {
        perDay = 30
      } else if (product.vipDayUnit === 2) {
        perDay = 1
      } else if (product.vipDayUnit === 3) {
        perDay = 365
      }
      day = perDay * product.vipDayCount
      return day
    }
  }
}
</script>

<style scoped lang='scss'>
.MsgDialog-container {
  position: relative;
  padding-top: 1px;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: top;
  background: #FFEED9;
  width: 680rpx;
  border-radius: 30rpx;

  .img-close {
    position: absolute;
    top: 38upx;
    right: 28upx;
    width: 50upx;
    height: 50upx;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon {
      width: 26upx;
      height: 26upx;
    }
  }

  .vip_icon {
    width: 198rpx;
    height: 184rpx;
    position: absolute;
    left: -30rpx;
    top: -45rpx;
    transform: rotate(-45deg);
  }

  .title_container {
    .title {
      font-size: 31px;
      font-weight: bold;
      text-align: center;
      height: 90rpx;
      background-image: linear-gradient(#FC9C13, #FF7101);
      background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-top: 30rpx;
      margin-bottom: 10rpx;
    }
  }

  .row {
    border-radius: 100rpx;
    margin: 0 30rpx 15rpx 30rpx;
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    height: 50rpx;

    &.quanxian {
      height: 80rpx;
      background-color: #fff;
    }

    .icon {
      width: 54rpx;
      height: 54rpx;
      border-radius: 100rpx;
      background-size: contain;
      background-position: center;

      &.qy1 {
        background-image: url("http://down.qwdata.vip/app_icon/1704725937018");
      }

      &.qy2 {
        background-image: url("http://down.qwdata.vip/app_icon/1704725943916");
      }

      &.qy3 {
        background-image: url("http://down.qwdata.vip/app_icon/1704725949578");
      }

      &.qy4 {
        background-image: url("http://down.qwdata.vip/app_icon/1704725962772");
      }

      &.qy5 {
        background-image: url("http://down.qwdata.vip/app_icon/1704725968142");
      }

      &.qy6 {
        background-image: url("http://down.qwdata.vip/app_icon/1704725974458");
      }

      &.cuo {
        width: 40rpx;
        height: 40rpx;
        background-image: url("http://down.qwdata.vip/app_icon/1704725723365");
      }

      &.dui {
        width: 40rpx;
        height: 40rpx;
        background-image: url("http://down.qwdata.vip/app_icon/1704725728370");
      }
    }

    .text {
      width: 130rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #766B65;

      &.vip {
        margin-right: 20rpx;
        color: #000;
      }
    }

    .label {
      flex: 1;
      margin-left: 20rpx;
      font-size: 16px;
      color: #000;
    }
  }

  .product_container1 {
    border: 2px solid #FB8C3A;
    border-radius: 25rpx;
    margin: 32rpx 30rpx;
    margin-top: 20rpx;
    margin-bottom: 0;
    display: flex;
    background-color: #fff;
    height: 110rpx;
    align-items: center;

    .label {
      margin-left: 40rpx;
      font-weight: bold;
      font-size: 16px;
      flex: 1;
    }

    .price_container {
      display: flex;
      font-size: 28px;
      color: #FF373F;
      align-items: baseline;
      margin-right: 30rpx;
      margin-bottom: 10rpx;

      .unit {
        font-size: 14px;
      }

      .per {
        font-size: 12px;
      }
    }
  }

  @keyframes tiao3 {
    0% {
      font-size: 19px;
    }
    50% {
      font-size: 17px;
    }
    100% {
      font-size: 19px;
    }
  }

  .btns_container {
    margin: 35rpx 30rpx 50rpx 30rpx;

    .buchang {
      width: 244rpx;
      //animation: tiao3 1000ms infinite;
      height: 84rpx;
      background-color: #FFFFFF;
      border-radius: 47rpx;
      font-family: SourceHanSansCN-Regular;
      font-size: 15px;
      color: #A8A7A7;
      font-weight: 400;

      .text {
        background-image: linear-gradient(#FC9C13, #FF7101);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    @keyframes tiao {
      0% {
        height: 95rpx;
        width: 370rpx;
        font-size: 19px;
      }
      50% {
        height: 84rpx;
        width: 350rpx;
        font-size: 17px;
      }
      100% {
        height: 95rpx;
        width: 370rpx;
        font-size: 19px;
      }
    }

    .btn {
      height: 84rpx;
      width: 350rpx;
      font-family: SourceHanSansCN-Medium;
      font-size: 15px;
      color: #FFFFFF;
      font-weight: 500;

      &.buy {
        color: #fff;
        background-image: linear-gradient(133deg, #FD8421 0%, #FE4B47 95%);
        border-radius: 42rpx;
        //animation: tiao 1000ms infinite;
      }
    }
  }
}
</style>
